<template>
    <div id="data3">
        <div id="main1" style="width: 100%;height:200px;"></div>
        <hr>
        <!-- <div id="main2" style="width: 100%;height:200px;"></div> -->
    </div>
</template>

<script>
var echarts = require('echarts');
export default {
    mounted() {
        var myChart1 = echarts.init(document.getElementById('main1'));
        var option1 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['开锁方式1成功', '开锁方式2成功', '开锁方式3成功', '开锁方式4失败', '开锁方式5失败', '开锁方式6失败', '开锁方式7失败', '开锁方式8失败']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        { value: 879, name: '开锁成功', selected: true },
                        { value: 1683, name: '开锁失败' },
                    ]
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    label: {
                        normal: {
                            formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            backgroundColor: '#eee',
                            borderColor: '#aaa',
                            borderWidth: 1,
                            borderRadius: 4,
                            // shadowBlur:3,
                            // shadowOffsetX: 2,
                            // shadowOffsetY: 2,
                            // shadowColor: '#999',
                            // padding: [0, 7],
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                // abg: {
                                //     backgroundColor: '#333',
                                //     width: '100%',
                                //     align: 'right',
                                //     height: 22,
                                //     borderRadius: [4, 4, 0, 0]
                                // },
                                hr: {
                                    borderColor: '#aaa',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                b: {
                                    fontSize: 16,
                                    lineHeight: 33
                                },
                                per: {
                                    color: '#eee',
                                    backgroundColor: '#334455',
                                    padding: [2, 4],
                                    borderRadius: 2
                                }
                            }
                        }
                    },
                    data: [
                        { value: 335, name: '开锁方式1成功' },
                        { value: 310, name: '开锁方式2成功' },
                        { value: 234, name: '开锁方式3成功' },
                        { value: 135, name: '开锁方式4失败' },
                        { value: 1048, name: '开锁方式5失败' },
                        { value: 251, name: '开锁方式6失败' },
                        { value: 147, name: '开锁方式7失败' },
                        { value: 102, name: '开锁方式8失败' }
                    ]
                }
            ]
        };
        myChart1.setOption(option1);


        // var myChart2 = echarts.init(document.getElementById('main2'));
        // var option2 = {
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {            // 坐标轴指示器，坐标轴触发有效
        //             type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        //         }
        //     },
        //     legend: {
        //         data: ['开锁方式1成功', '开锁方式2成功', '开锁方式3成功', '开锁方式4成功', '开锁方式1失败', '开锁方式2失败', '开锁方式3失败', '开锁方式4失败']
        //     },
        //     grid: {
        //         left: '3%',
        //         right: '4%',
        //         bottom: '3%',
        //         containLabel: true
        //     },
        //     xAxis: [
        //         {
        //             type: 'category',
        //             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        //         }
        //     ],
        //     yAxis: [
        //         {
        //             type: 'value'
        //         }
        //     ],
        //     series: [
        //         {
        //             name: '开锁方式1成功',
        //             type: 'bar',
        //             stack: '成功',
        //             data: [320, 332, 301, 334, 390, 330, 320]
        //         },
        //         {
        //             name: '开锁方式2成功',
        //             type: 'bar',
        //             stack: '成功',
        //             data: [120, 132, 101, 134, 90, 230, 210]
        //         },
        //         {
        //             name: '开锁方式3成功',
        //             type: 'bar',
        //             stack: '成功',
        //             data: [220, 182, 191, 234, 290, 330, 310]
        //         },
        //         {
        //             name: '开锁方式4成功',
        //             type: 'bar',
        //             stack: '成功',
        //             data: [150, 232, 201, 154, 190, 330, 410]
        //         },
        //         // {
        //         //     name:'开锁方式5成功',
        //         //     type:'bar',
        //         //     stack: '失败',
        //         //     data:[862, 1018, 964, 1026, 1679, 1600, 1570],

        //         // },
        //         {
        //             name: '开锁方式1失败',
        //             type: 'bar',
        //             stack: '失败',
        //             data: [620, 732, 701, 734, 1090, 1130, 1120]
        //         },
        //         {
        //             name: '开锁方式2失败',
        //             type: 'bar',
        //             stack: '失败',
        //             data: [120, 132, 101, 134, 290, 230, 220]
        //         },
        //         {
        //             name: '开锁方式3失败',
        //             type: 'bar',
        //             stack: '失败',
        //             data: [60, 72, 71, 74, 190, 130, 110]
        //         },
        //         {
        //             name: '开锁方式4失败',
        //             type: 'bar',
        //             stack: '失败',
        //             data: [62, 82, 91, 84, 109, 110, 120]
        //         }
        //     ]
        // };
        // myChart2.setOption(option2);

    }
}
</script>

<style>
   #data3{
       padding-bottom: 64px;
   }
</style>

